<template>
	<view class="page">
		<u-navbar title="训练营" title-color="#ffffff" back-icon-color="#ffffff"
			:background="background" :immersive="true"></u-navbar>
		<view class="bang-top relative">
			<view class="bang-time">
				时间：{{startTime | formatDateTime}} - {{endTime | formatDateTime}}
			</view>
		</view>
		<view class="bang-list">
			<view class="list-th flex-row ">
				<view class="list-th-lf flex-row justify-center">
					排名
				</view>
				
				<view class="list-th-md1">
					<!-- 占位 -->
				</view>
				<view class="list-th-md flex-row flex-1 justify-start">
					姓名
				</view>
				<view class="list-th-rg flex-row justify-end">
					积分
				</view>
			</view>
			<view class="flex-row mbt-26 mt-12" v-for="(item,index) in list" :key="index">
				<view class="list-th-lf flex-row justify-center items-center">
					<image v-if="item.paiming == 1" class="index-icon" src="https://terminator.axu9.com/images/xunlybang-first.png" mode=""></image>
					<image v-else-if="item.paiming == 2" class="index-icon" src="https://terminator.axu9.com/images/xunlybang-secend.png" mode=""></image>
					<image v-else-if="item.paiming == 3" class="index-icon" src="https://terminator.axu9.com/images/xunlybang-third.png" mode=""></image>
					<text v-else class="word-break-ct index-font">{{item.paiming}}</text>
				</view>
				<view class="list-th-md1 flex-row items-center">
					<image :src="item.avatarUrl" class="avatar-img" mode=""></image>
				</view>
				<view class="list-th-md flex-row flex-1 justify-start items-center nickname-font">
					{{item.nickName}}
				</view>
				<view class="list-th-rg flex-row justify-end items-center word-break-rg integal-font">
					{{item.activity_num}}
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		Ranking
	} from "@/api/activity.js"
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				list: [],
				page: 1,//分页 当前页数
				totalPage: 1, //分页 总页数
				startTime: '',//开始时间
				endTime: '',//结束时间
			}
		},
		filters: {
			formatDateTime(input) {  
				if(!input) {
					return
				}
			    // 创建一个 Date 对象  
			    const date = new Date(input);  
			  
			    // 获取年、月、日、小时和分钟  
			    const year = date.getFullYear();  
			    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且确保是两位数  
			    const day = String(date.getDate()).padStart(2, '0'); // 确保日期是两位数  
			    const hours = date.getHours();  
			    const minutes = date.getMinutes();  
			  
			    // 定义时间段的名称  
			    let timePeriod;  
			    if (hours < 6) {  
			        timePeriod = '凌晨';  
			    } else if (hours < 12) {  
			        timePeriod = '上午';  
			    } else if (hours < 18) {  
			        timePeriod = '下午';  
			    } else {  
			        timePeriod = '晚';  
			    }  
			  
			    // 特殊处理凌晨的情况，将时间格式化为 "00:00"  
			    const formattedHours = hours === 0 ? '00' : String(hours).padStart(2, '0');  
			    const formattedMinutes = minutes === 0 ? '00' : String(minutes).padStart(2, '0');  
			  
			    // 特殊处理凌晨的情况，将时间段名称改为 "凌晨" 并保留 "00:00"  
			    if (timePeriod === '凌晨' && formattedHours === '00' && formattedMinutes === '00') {  
			        // return `${year}年 ${month}月${day}日 ${timePeriod}${formattedHours}：${formattedMinutes}`;  
					 return `${month}月${day}日 ${timePeriod}${formattedHours}:${formattedMinutes}`;  
			    }  
			  
			    // 一般情况下不会执行到这里，因为我们已经特殊处理了凌晨的情况  
			    // 但为了代码的完整性，保留这个分支（虽然在这个特定例子中不会被用到）  
			    // return `${year}年 ${month}月${day}日 ${timePeriod} ${formattedHours}：${formattedMinutes}`;  
				return `${month}月${day}日 ${timePeriod} ${formattedHours}:${formattedMinutes}`;  
			}  
			  
			// // 测试  
			// const inputTime = '2024-10-10 00:00:00';  
			// const formattedTime = formatDateTime(inputTime);  
			// console.log(formattedTime); // 输出: 2024年 10月10日 凌晨00：00
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData(){
				Ranking({
					page: this.page
				}).then(res => {
					if (res.errno == 0) {
						console.log(res.data,'排行榜')
						// this.list = res.data.list
						this.totalPage = res.data.total;
						this.list = [...this.list,...res.data.list];
						this.startTime = res.data.time[0];
						this.endTime = res.data.time[1];
						console.log(this.list)
						
					}
				}).catch(err => {
					
				})
			}
		},
		onReachBottom() {
			console.log('到底了')
			if(this.page < this.totalPage ){
				this.page ++;
				this.getData();
			}else {
				uni.showToast({
					title: '已加载全部',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	@import url(../../static/css/common.css);
	.mt-15 {
		margin-top: 30rpx;
	}
	.mt-12 {
		margin-top: 24rpx;
	}
	.mbt-26 {
		margin-bottom: 52rpx;
	}
	.word-break-rg{
		word-break: break-all;
		text-align: right;
	}
	.word-break-ct {
		width: 100%;
		word-break: break-all;
		text-align: center;
	}
	.bang-top {
		width: 100%;
		height: 509rpx;
		background-image: url('https://terminator.axu9.com/images/xunlybang-top-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: -1;
	}
	.bang-time {
		position: absolute;
		left: 41rpx;
		bottom: 88rpx;
		font-size: 26rpx;
		text-align: left;
		color: #FFDDDD;
		text-shadow: 6rpx 6rpx 20rpx #ee2020;
		/* box-shadow: 0 0 15rpx 3rpx #ee2020; */
	}
	.bang-list {
		border-radius: 36rpx 36rpx 0 0;
		margin-top: -56rpx;
		z-index: 99;
		background-color: #fff;
		padding: 40rpx 88rpx 40rpx 40rpx;
	}
	.list-th{
		font-weight: SC-Bold;
		font-size: 24rpx;
		color: #666666;
	}
	.list-th-lf {
		width: 120rpx;
		padding-right: 20rpx;
	}
	.list-th-md1 {
		width: 80rpx;
		margin-right: 27rpx;
	}
	.list-th-md {
		
	}
	.list-th-rg {
		width: 130rpx;
	}
	.avatar-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.index-icon {
		width: 50rpx;
		height: 66rpx;
	}
	.index-font {
		font-weight: SC-Bold;
		font-size: 36rpx;
		color: #999999;
	}
	.nickname-font {
		font-weight: SC-Medium;
		font-size: 28rpx;
		color: #151515;
		font-weight: 500;
	}
	.integal-font {
		font-weight: SC-Bold;
		font-size: 36rpx;
		color: #151515;
	}
	
	

</style>
